<template>
  <div style="display: flex;padding: 15px">
    <el-form :model="form" label-width="auto" style="width: 300px">
      <el-form-item label="">
        <el-input placeholder="输入具体信息" v-model="form.queryString"  />
      </el-form-item>
    </el-form>
    <div style="padding-left: 3px">
      <el-tooltip
          class="box-item"
          effect="dark"
          content="用于查询相关数据"
          placement="bottom"
      >
        <el-button type="primary" icon="Search" @click="getMenuMgr()" round>查询</el-button>
      </el-tooltip>

      <el-tooltip
          class="box-item"
          effect="dark"
          content="可以在该表中添加数据"
          placement="bottom"
      >
        <el-button type="success" icon="Plus" round>添加</el-button>
      </el-tooltip>
    </div>
  </div>

  <el-table :data="tableData" style="width: 100%;border-radius: 10px">
    <el-table-column fixed prop="uuid" label="uuid" width="120" />
    <el-table-column prop="name" label="名称" width="120" />
    <el-table-column prop="icon" label="图标" width="120">
<!--      <template #default="scope">-->
<!--        <el-icon>-->
<!--          <component :is="scope.row.icon" />-->
<!--        </el-icon>-->
<!--      </template>-->
    </el-table-column>
    <el-table-column prop="path" label="路由地址" width="120" />
    <el-table-column prop="id" label="id" width="120" />
    <el-table-column prop="children_name" label="二级名称" width="120" />
    <el-table-column prop="children_icon" label="二级图标" width="120" />
    <el-table-column prop="children_path" label="二级路由地址" width="120" />
    <el-table-column prop="create_time" label="创建日期" width="240" />
    <el-table-column prop="update_time" label="修改日期" width="240" />
    <el-table-column fixed="right" label="操作数据表" min-width="230">
      <template #default="scope">
        <el-tooltip
            class="box-item"
            effect="dark"
            content="删除该表中该行数据"
            placement="left-start"
        >
          <el-button link type="danger" icon="Delete"  @click="deleteLine(scope.row.id)" />
        </el-tooltip>
        <el-tooltip
            class="box-item"
            effect="dark"
            content="点击可以编辑该行的数据"
            placement="right-start"
        >
          <el-button link type="primary" @click="editOpen" icon="EditPen" />
        </el-tooltip>

      </template>
    </el-table-column>
  </el-table>
  <div class="demo-pagination-block" style="padding-top: 30px;">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[100, 200, 300, 400]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout=" ->,total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>

</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import {getUser,menuMgr} from "@/api/api"
import type { Menu, Res } from "@/interface/menu";
const form = ref({queryString:''})
import type {ComponentSize, DrawerProps} from 'element-plus'
import {success,error} from "@/message/messageApi"
import {tree} from "@/api/api"
import {ElMessageBox} from "element-plus";
const tableData = ref<Menu>()

const drawer = ref(false)
onMounted(() =>{
  getMenuMgr();
})
const currentPage = ref(4)
const pageSize = ref(100)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const direction = ref<DrawerProps['direction']>('rtl')
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确定关闭吗')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
function getMenuMgr(){
  menuMgr().then((res:any) =>{
    console.log(res)
    tableData.value= res.data
  })
}
function deleteLine(val:any){}

function editOpen(){}
</script>

<style scoped>
.tree-container {
  height: 300px;
  width: 200px;
  overflow-y: auto;
  border: 1px solid #ccc;
  display: flex;
  align-items: stretch;
}
</style>
